{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健身房管理系统</title>
    <link rel="stylesheet" href="{% static 'css/input_text.css'%}">
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
</head>

<style>
    .center-form {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh; 
        margin: 0;
        padding: 0;
        gap: 10px;
    }
</style>

<style>
    .background{
        flex:1;
    background-image: url('/static/background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    overflow-y: hidden;
    overflow-x: hidden;
    flex-direction: column;
}
</style>

<style>
    .gradient-text {
        font-size: 50px; /* 设置字体大小 */
        background: linear-gradient(to right, #52E5E7, #130cb7); /* 定义从左到右的红蓝渐变 */
        -webkit-background-clip: text; /* 将背景应用到文本 */
        background-clip: text;
        color: transparent; /* 设置文本颜色为透明，以显示背景渐变 */
        font-weight: bold;
        /* display: inline-block; */
    }
  </style>

<script>
    // 当页面加载完毕后执行
    window.onload = function() {
        // 设置倒计时时间（秒）
        var countdownTime = 5;
        // 获取显示倒计时的元素
        var countdownElement = document.createElement('h1'); // 创建一个新的h1元素
        countdownElement.className = 'countdown';
        countdownElement.style.textAlign = 'center';
        countdownElement.textContent = '5秒后,页面将自动跳转至登录界面';
        document.body.appendChild(countdownElement); // 将元素添加到body中

        // 更新倒计时显示
        function updateCountdown() {
            countdownTime--;
            countdownElement.textContent = countdownTime + '秒后，页面将自动跳转至登录界面';
            if (countdownTime > 0) {
                setTimeout(updateCountdown, 1000); // 1秒后再次调用updateCountdown
            } else {
                window.location.href = '/'; // 时间到，跳转
            }
        }
        // 启动倒计时
        updateCountdown();
         // 将倒计时元素添加到背景图div中
         var backgroundDiv = document.querySelector('.background');
        backgroundDiv.appendChild(countdownElement);
    };
</script>
<body>  
    <div class="background">
        
    </div>
</body>
</html>